<template>
  <el-container>
    <el-main>
      <el-card shadow="never">
        <el-tabs tab-position="top">
          <el-tab-pane label="列配置">
            <sc-form-table
              v-model="column"
              :add-template="addTemplate"
              placeholder="请添加列数据"
            >
              <el-table-column
                prop="label"
                label="显示名称"
                width="180"
              >
                <template #default="scope">
                  <el-input
                    v-model="scope.row.label"
                    placeholder="请输入内容"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="prop"
                label="字段名"
                width="180"
              >
                <template #default="scope">
                  <el-input
                    v-model="scope.row.prop"
                    placeholder="请输入内容"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="width"
                label="宽度"
                width="180"
              >
                <template #default="scope">
                  <el-input
                    v-model="scope.row.width"
                    placeholder="请输入内容"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="isEdit"
                label="加入编辑"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-checkbox v-model="scope.row.isEdit" />
                </template>
              </el-table-column>
              <el-table-column
                prop="isSearch"
                label="加入搜索"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-checkbox v-model="scope.row.isSearch" />
                </template>
              </el-table-column>
            </sc-form-table>
          </el-tab-pane>
          <el-tab-pane label="基础配置">
            <el-row>
              <el-col
                :xl="12"
                :lg="8"
              >
                <el-form
                  :model="base"
                  label-width="80px"
                >
                  <el-form-item label="name">
                    <el-input v-model="base.name" />
                    <div class="el-form-item-msg">
                      系统唯一且与路由别名一致，否则导致缓存失效。
                    </div>
                  </el-form-item>
                  <el-form-item label="rowKey">
                    <el-input v-model="base.rowKey" />
                    <div class="el-form-item-msg">
                      表格唯一标识，编辑保存和删除将传递rowKey
                    </div>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="API路径配置">
            <el-alert
              title="$API 映射文件: @/api/index.js 统一接口管理器, 所以需提前配置好API对象."
              type="warning"
              style="margin: 0 0 20px 0"
            />
            <el-row>
              <el-col
                :xl="12"
                :lg="8"
              >
                <el-form
                  :model="api"
                  label-width="80px"
                >
                  <el-form-item label="获取列表">
                    <el-input v-model="api.list">
                      <template #prepend>
                        $API.
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="新增">
                    <el-input v-model="api.add">
                      <template #prepend>
                        $API.
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="保存">
                    <el-input v-model="api.save">
                      <template #prepend>
                        $API.
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="查询详细">
                    <el-input v-model="api.show">
                      <template #prepend>
                        $API.
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="删除">
                    <el-input v-model="api.del">
                      <template #prepend>
                        $API.
                      </template>
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <pre style="margin-top: 50px; display: none">{{ code }}</pre>
    </el-main>
    <el-footer>
      <el-dropdown style="margin-right: 15px">
        <el-button
          type="primary"
          icon="el-icon-download"
          :loading="downloadcodeLoading"
        >
          下载VUE文件
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="downloadListCode">
              下载 index.vue
            </el-dropdown-item>
            <el-dropdown-item @click="downloadSaveCode">
              下载 save.vue
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <el-button
          type="primary"
          plain
          icon="el-icon-top-right"
          :loading="showcodeLoading"
        >
          预览代码
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="showListCode">
              预览 index.vue
            </el-dropdown-item>
            <el-dropdown-item @click="showSaveCode">
              预览 save.vue
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-footer>
  </el-container>

  <el-dialog
    v-model="codeVisible"
    title="代码预览"
    width="60%"
    append-to-body
    destroy-on-close
  >
    <el-alert
      title="需将VUE文件放置views文件夹,路由匹配组件的路径下,如文件名为index.vue可不需要写文件名"
      type="success"
      show-icon
      style="margin-bottom: 20px"
    />
    <pre
      contenteditable
      class="code"
    >{{ code }}</pre>
    <template #footer>
      <el-button
        type="primary"
        @click="codeVisible = false"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import template from "@/utils/template.js";

export default {
  name: "AutocodeList",
  data() {
    return {
      codeVisible: false,
      showcodeLoading: false,
      downloadcodeLoading: false,
      code: "",
      base: {
        name: "",
        rowKey: "id",
      },
      api: {
        list: "",
        add: "",
        save: "",
        show: "",
        del: "",
      },
      column: [],
      addTemplate: {
        label: "",
        prop: "",
        width: "100",
        isSearch: false,
        isEdit: false,
      },
    };
  },
  mounted() {},
  methods: {
    //列表预览
    async showListCode() {
      this.showcodeLoading = true;
      await this.getListTpl();
      this.showcodeLoading = false;
      this.codeVisible = true;
    },
    //获取列表模板文件
    async getListTpl() {
      var data = {
        createDate: new Date().toLocaleString(),
        base: this.base,
        column: this.column,
        api: this.api,
      };
      var tpl = await this.$HTTP.get("code/list/index.vue");
      this.code = template(tpl, data);
    },
    //详细预览
    async showSaveCode() {
      this.showcodeLoading = true;
      await this.getSaveTpl();
      this.showcodeLoading = false;
      this.codeVisible = true;
    },
    //获取详细模板文件
    async getSaveTpl() {
      var data = {
        createDate: new Date().toLocaleString(),
        base: this.base,
        column: this.column.filter((item) => item.isEdit === true),
        api: this.api,
      };
      var tpl = await this.$HTTP.get("code/list/save.vue");
      this.code = template(tpl, data);
    },
    async downloadListCode() {
      this.downloadcodeLoading = true;
      await this.getListTpl();
      this.downloadcodeLoading = false;
      this.createFile(this.code, "index.vue");
    },
    async downloadSaveCode() {
      this.downloadcodeLoading = true;
      await this.getSaveTpl();
      this.downloadcodeLoading = false;
      this.createFile(this.code, "save.vue");
    },
    //创建文件并下载
    createFile(row, name) {
      const element = document.createElement("a");
      element.setAttribute(
        "href",
        "data:text/plain;charset=utf-8," + encodeURIComponent(row)
      );
      element.setAttribute("download", name);
      element.style.display = "none";
      element.click();
    },
  },
};
</script>

<style scoped>
.code {
  height: 400px;
  overflow: auto;
  background: #333;
  color: #999;
  padding: 20px;
  font-size: 14px;
  font-family: "consolas";
  line-height: 1.5;
}
</style>
